<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对行高的深入思考</title>

    <style>
        /* 
           如果元素中包含文字的话可以使用line-height代替height,并且设置line-height如果大于font-size的话会实现文字垂直居中的功能

           但是行高的特点在于他可以被子元素继承，这有弊也有利，有时候我们要显示的为它置0

           CSS中起高度作用的就是height以及line-height！如果一个标签没有定义height属性(包括百分比高度)，
           那么其最终表现的高度一定是由line-height起作用(不是由元素撑起高度 而是由默认的行高来撑起高度)

           网上都是这么说的，把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的，
           但其实也是有问题的。问题在于height，看我的表述：“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”，
           差别在于我把height去掉了，这个height是多余的，您不信您可以自己试试。
        */
        .box{
            width: 200px;
            line-height: 100px;
            height: 100px;
          
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
     hcvsui
    </div>
</body>
</html>